.unit-container {
  position: relative;
  width: 64px;
  height: 64px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;

  .unit-bg {
    position: relative;
    width: 100%;
    height: 100%;

    .unit-bg-image {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 60px;
      height: 60px;
    }

    .unit-bg-image-animation-scale {
      animation: unit-bg-image-scale 1.28s linear;
    }

    &.unit-bg-animation-rotate {
      animation: dom-rotate360 1.28s linear;
    }

    // 点击动画
    &.unit-bg-click-animation-rotate {
      animation: dom-rotate360 0.4s linear;
    }
  }

  .unit-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    &.unit-bar-all-animation-scale {
      animation: unit-bg-image-scale 1.28s linear;
    }

    .shake-container {
      width: 46px;
      height: 46px;
      position: relative;
    }

    .unit-bar-all {
      position: absolute;
      top: 9px;
      left: 9px;
      width: 46px;
      height: 46px;
      transition: transform 1.28s linear;
    }

    .unit-bar {
      position: absolute;
      width: 46px;
      height: 46px;
      transition: transform 1.28s linear;
    }

    // 抖动动画
    .shake-animation {
      animation: shake-animation 0.8s linear;
    }
  }

  .unit-wave-container {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 50%;
    z-index: 0;

    &.unit-wave-container-animation {
      animation: wave-animation-scale 2.88s linear;
    }

    .unit-wave {
      position: absolute;
      left: -10px;
      top: 40px;
      width: 100%;
      height: 100%;
      z-index: 100;
      transform: scale(0.8);
    }

    .wave-animation {
      animation: wave-animation 2.88s linear;
    }
  }

  .unit-box,
  .real-unit {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    z-index: 3;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
  }

  .real-unit {
    color: #2283e2;

    &.real-unit-color-animation {
      animation: real-unit-color-animation 1.92s linear;
    }
  }

  .unit,
  .unit1,
  .unit2,
  .unit3 {
    position: absolute;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .unit {
    top: 16px;
    right: 8px;
  }

  .unit-annimation {
    animation: unit-annimation 2.88s linear;
  }

  .unit1,
  .unit2,
  .unit3 {
    left: 8px;
  }

  .unit1 {
    top: -16px;
    opacity: 0;
  }

  .unit2 {
    top: 0px;
    opacity: 0;
  }

  .unit3 {
    top: 16px;
  }

  .unit1-animation {
    animation: unit1-animation 2.88s linear;
  }

  .unit2-animation {
    animation: unit2-animation 2.88s linear;
  }

  .unit3-animation {
    animation: unit3-animation 2.88s linear;
  }
}

.opacity0 {
  opacity: 0;
}

@keyframes dom-rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 1280ms */
@keyframes unit-bg-image-scale {
  0% {
    transform: scale(1);
  }

  /* 680ms */
  53.13% {
    transform: scale(1);
  }

  /* 840ms */
  65.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  78.13% {
    transform: scale(0.9);
  }

  /* 1160ms */
  90.63% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* 2880ms */
// 第720毫秒：100% 第880毫秒:110% 第1040毫秒:90% 第1200毫秒:105% 第1360毫秒:100%
// 从第0毫秒到第800毫秒：位置上移42； 从第1800毫秒到第2200毫秒：位置下移42；
@keyframes wave-animation-scale {
  0% {
    transform: scale(1);
  }

  /* 720ms */
  25% {
    transform: scale(1);
  }

  /* 880ms */
  30.56% {
    transform: scale(1.1);
  }

  /* 1040ms */
  36.11% {
    transform: scale(0.9);
  }

  /* 1200ms */
  41.67% {
    transform: scale(1.05);
  }

  /* 1360ms */
  47.22% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

// 2880ms
@keyframes wave-animation {
  0% {
    top: 42px;
    transform: scale(1);
  }

  // 800ms
  27.78% {
    top: -4px;
  }

  //  1880ms
  65.28% {
    top: -4px;
  }

  // 2200ms
  76.39% {
    top: 42px;
  }

  /* 720ms */
  25% {
    transform: scale(1);
  }

  /* 880ms */
  30.56% {
    transform: scale(1.1);
  }

  /* 1040ms */
  36.11% {
    transform: scale(0.9);
  }

  /* 1200ms */
  41.67% {
    transform: scale(1.05);
  }

  /* 1360ms */
  47.22% {
    transform: scale(1);
  }

  100% {
    // transform: scale(1);
    top: 42px;
  }
}

/* 2880ms */
// 从1120毫秒到第1280毫秒--不透明度100%到0%，位置向下移动18
@keyframes unit3-animation {
  0% {
    opacity: 0;
    top: 16px;
  }

  30% {
    opacity: 0;
    top: 16px;
  }

  // 960
  33.33% {
    opacity: 1;
    top: 16px;
  }

  // 1120
  38.89% {
    opacity: 1;
  }

  // 1280
  44.44% {
    opacity: 0;
    top: 32px;
  }

  100% {
    opacity: 0;
    top: 32px;
  }
}

/* 2880ms */
// 从1120毫秒到第1280毫秒--不透明度0%到100%，位置向下移动18（到坐标位置）；从第1280毫秒到1440毫秒--不透明度100%到0%，位置向下移动18；
@keyframes unit2-animation {
  0% {
    opacity: 0;
    top: 0;
  }

  // 1120
  38.89% {
    opacity: 0;
    top: 0;
  }

  // 1280
  44.44% {
    opacity: 1;
    top: 16px;
  }

  // 1440
  50% {
    opacity: 0;
    top: 32px;
  }

  100% {
    opacity: 0;
    top: 32px;
  }
}

// 从第1280毫秒到1440毫秒--不透明度0%到100%，位置向下移动20（即，到坐标位置再向下2）；到1560毫秒，位置上移3；到1680毫秒，位置下移1（到坐标位置）
@keyframes unit1-animation {
  0% {
    opacity: 0;
    top: -16px;
  }

  // 1280
  44.44% {
    opacity: 0;
    top: -16px;
  }

  // 1440
  50% {
    opacity: 1;
    // 16+2
    top: 18px;
  }

  // 1560
  54.16% {
    opacity: 1;
    // 16-3
    top: 13px;
  }

  //1680
  58.33% {
    opacity: 1;
    top: 16px;
  }

  100% {
    opacity: 1;
    top: 16px;
  }
}

/* 1920ms */
@keyframes real-unit-color-animation {
  0% {
    opacity: 0;
  }

  /* 从第1800毫秒到1920毫秒--白色字由不透明度100%到0%；蓝色字由不透明度0%到100%； */

  93.75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 2880
@keyframes unit-annimation {
  0% {
    opacity: 0;
  }

  // 960
  33.33% {
    opacity: 0;
  }

  // 1120
  38.89% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

// 800ms
// 第2080毫秒：0 第2240(160ms)毫秒:+15 第2400(320ms)毫秒:-12 第2560(480ms)毫秒:+8 第2720(640ms)毫秒:-6 第2880(800ms)毫秒:0
@keyframes shake-animation {
  // 0
  0% {
    transform: rotate(0deg);
  }

  // 160ms
  20% {
    transform: rotate(15deg);
  }

  // 320ms
  40% {
    transform: rotate(-12deg);
  }

  // 480ms
  60% {
    transform: rotate(8deg);
  }

  // 640ms
  80% {
    transform: rotate(-6deg);
  }

  // 800ms
  100% {
    transform: rotate(0deg);
  }
}
